<template>
  <div class="classroomInfo">
    <el-card>
      <!-- 顶部信息 -->
      <div class="className">
        {{ className }}
      </div>
      <div class="header_info">
        <div class="header_info_img">
          <img :src="imageUrl" />
        </div>
        <div class="header_info_config" style="padding-left: 14px;">
          <p>教师名称</p>
          <p>{{ teacherName }}</p>
        </div>
        <div class="header_info_information" style="padding-left: 20px;margin-top: 10px;">
          <span>教师手机号：</span>
          <span>{{ teacherInfo.mobile }}</span>
        </div>
        <div class="header_info_information" style="padding-left: 50px;margin-top: 10px;">
          <span>教师邮箱：</span>
          <span>{{ teacherInfo.email }}</span>
        </div>
      </div>
    </el-card>
    <div class="empty"></div>
    <el-card>
      <!-- 搜索框 -->
      <div class="search_wrap">
        <el-row :gutter="10">
          <el-col :span="8">
            <el-input
              placeholder="学员姓名/学员编号/学员手机号/班级名称"
              v-model="searchCondition"
              clearable
              style="width: 100%"
              @keyup.enter.native="queryListData"
            >
              <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input>
          </el-col>
          <el-col :span="8">
            <el-date-picker
              v-model="queryDate"
              @change="queryListData"
              type="daterange"
              range-separator="~"
              start-placeholder="注册日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-col>
          <el-col :span="5">
            <el-select
              v-model="level"
              placeholder="全部级别"
              @change="queryListData"
              filterable
              clearable
            >
              <el-option
                v-for="item in levelList"
                :key="item.label.id"
                :label="item.label.name"
                :value="item.label.code"
              >
              </el-option>
            </el-select>
          </el-col>
        </el-row>
      </div>

      <div class="table_list">
        <el-table
          ref="studentTable"
          :data="tableListData"
          min-height="500"
          border
          v-loading="loading"
          @selection-change="handleSelectionStudent"
          style="width: 100%"
        >
          <el-table-column type="selection" align="center" width="40" />

          <el-table-column label="学员编号" align="center">
            <template slot-scope="scope">
              <p>{{ scope.row.sno }}</p>
            </template>
          </el-table-column>

          <el-table-column label="当前级别" align="center">
            <template slot-scope="scope">
              <p>{{ scope.row.initial_level }}</p>
            </template>
          </el-table-column>

          <el-table-column label="学员姓名" align="center">
            <template slot-scope="scope">
              <p
                class="see_detail"
                @click="goToURL('studentInfo', 'details', scope.row.id)"
              >
                {{ scope.row.name }}
              </p>
            </template>
          </el-table-column>

          <el-table-column
            v-for="(item, index) in tableCaption"
            :key="index"
            :label="item.label"
            align="center"
          >
            <template slot-scope="scope">
              <span>{{ scope.row[item.value] }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                circle
                @click="goToURL('studentInfo', 'details', scope.row.id)"
                >查看学习进度</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <link-pagination
          :total="total"
          :currentPage="currentPage"
          :limit="limit"
          v-if="total != 0"
          @pagination="getPaginationParams"
        ></link-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import http from "@/api/classroom";
import httpTeacher from "@/api/teacher";
import { paginationMixin } from "@/mixin";
import { formatDate, formatArray } from "@/utils";
export default {
  name: "classroomInfo",
  mixins: [paginationMixin],
  data() {
    return {
      // ---
      teacherInfo: {},
      level: null,
      levelList: [],
      classroom_id: "",
      teacher_id: '',
      teacherName: "",
      className: "",
      imageUrl: null,
      student_status: null,
      statisticsTagData: [
        {
          label: "全部学员",
          total: 0,
          status: "student",
          icon: "icon-yifukuan",
          backgroundStart: "#17B5EB",
          backgroundEnd: "#1797EB"
        },
        {
          label: "已激活账号",
          total: 0,
          status: "student",
          icon: "icon-yifukuan",
          backgroundStart: "#02c779",
          backgroundEnd: "#02c765"
        },
        {
          label: "未激活账号",
          total: 0,
          status: "student",
          icon: "icon-yifukuan",
          backgroundStart: "#F27450",
          backgroundEnd: "#F25751"
        }
      ],
      selectionCustomer: [],
      selectedNum: 0,
      showBtn: false,
      status: "",
      // ---
      tableListData: [],
      tableCaption: [],
      loading: false,
      searchCondition: null,
      queryDate: null,
      delNiche: null,
      intention: null,
      importModal: false
    };
  },
  methods: {
    goToURL(name, pageType, id) {
      this.$router.push({ name, params: { pageType, id } });
    },
    goToURL2(name, pageType, id) {
      this.$router.push({ name, query: { pageType, id } });
    },
    // 搜索框事件
    queryListData() {
      this.getListData();
    },
    // 页面加载获取数据
    getListData(
      page = this.currentPage,
      list_rows = this.limit,
      search = this.searchCondition,
      level = this.level
    ) {
      this.loading = true;
      let params = { page, list_rows, search, level };
      params.classroom_id = this.classroom_id;
      if (this.queryDate) {
        params["create_time_start"] = formatDate.toStr(
          new Date(this.queryDate[0]),
          "YYYY-MM-DD"
        );
        params["create_time_end"] = formatDate.toStr(
          new Date(this.queryDate[1]),
          "YYYY-MM-DD"
        );
      }
      http.getClassStudent(params).then(res => {
        console.log("res", res);
        this.loading = false;
        this.total = res.data.total;
        this.tableCaption = [
          {
            label: "学员手机号",
            value: "mobile"
          },
          {
            label: "学员邮箱",
            value: "email"
          },
          {
            label: "有效期",
            value: "end_date"
          },
          {
            label: "创建时间",
            value: "create_time"
          }
        ];
        let tableListData = res.data.data;

        console.log("tableListData", tableListData);
        this.tableListData = tableListData;
      });
    },
    // tab表单第一列选中事件
    handleSelectionStudent(val) {
      this.selectionCustomer = val;
      console.log(val);
      this.selectedNum = this.selectionCustomer.length;
      if (this.selectedNum === 0) {
        this.showBtn = false;
      } else {
        this.showBtn = true;
      }
      if (this.selectionCustomer.length !== 0) {
        this.delNiche = [];
        for (let item of this.selectionCustomer) {
          this.delNiche.push(item.id);
        }
      }
    },
    init() {
      let basicConfig = JSON.parse(sessionStorage.getItem("basicConfig"));
      this.levelList = formatArray(basicConfig.user_level);

      if (Object.keys(this.$route.params).length) {
        sessionStorage.setItem(
          "classroomInfoParams",
          JSON.stringify(this.$route.params)
        );
      }

      let pageParams = sessionStorage.getItem("classroomInfoParams");
      if (pageParams) {
        pageParams = JSON.parse(pageParams);
        this.classroom_id = pageParams.id.id;
        this.teacherName = pageParams.id.teacherName;
        this.className = pageParams.id.className;
        this.teacher_id = pageParams.id.teacher_id
      }

      httpTeacher.getContentDetail({ id: this.teacher_id }).then(res => {
        console.log("res", res);
        this.teacherInfo = res.data
        this.imageUrl = res.data.headimgurl;
      });
    }
  },
  created() {
    this.init();
    this.getListData();
  },
  mounted() {}
};
</script>

<style lang="scss" scoped>
@import "@/assets/style/listPage.scss";

.classroomInfo {
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
  overflow: auto;
  &::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    cursor: pointer;
    background: #f1f1f1;
  }

  &::-moz-scrollbar {
    display: none;
  }
  &::-ms-scrollbar {
    display: none;
  }
  &::-o-scrollbar {
    display: none;
  }

  &::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    width: 10px;
    cursor: pointer;
    background: #bbb;
  }
  &::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    border-radius: 0px;
    background: #f1f1f1;
  }
  .flag {
    padding: 0px 5px;
    background: #c6c7c9;
    color: #fff;
    border-radius: 14px;
  }
  .opt_wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 34px;
    &_left {
      display: flex;
      p {
        margin-right: 18px;
        color: #565656;
        font-size: 16px;
        cursor: pointer;
        &:hover {
          color: #1796eb;
        }
        &:nth-of-type(1) {
          cursor: default;
          color: #646464;
          &:hover {
            color: #646464;
          }
        }
      }
    }
    &_right {
      display: flex;
      align-items: center;
      p {
        margin-left: 18px;
        color: #565656;
        font-size: 16px;
        cursor: pointer;
        &:hover {
          color: #1796eb;
        }
      }
      .add {
        width: 72px;
        height: 30px;
        background: linear-gradient(top left, #17b5eb, #1796eb);
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
        cursor: pointer;
        border-radius: 5px;
        &:hover {
          color: white;
        }
      }
    }
  }
  .empty {
    width: 100%;
    height: 10px;
    background: #ebebeb;
  }
  .search_wrap {
    margin: 20px 0;
    div {
      //   margin-right: 17px;
    }
  }
  .className {
    padding: 10px 0 10px 34px;
  }
  .header_info {
    position: relative;
    padding: 10px 0 10px 34px;
    display: flex;
    &_img {
      width: 47px;
      height: 47px;
      overflow: hidden;
      border-radius: 50%;
      img {
        width: 47px;
        height: 47px;
      }
    }
    &_config {
      padding-left: 26px;
      padding-right: 26px;
      // border-right: 1px solid #bfbfbf;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      &:last-of-type {
        border-right: none;
      }
      p {
        &:nth-of-type(1) {
          font-size: 14px;
          color: #565656;
        }
        &:nth-of-type(2) {
          font-size: 20px;
          color: #333;
          font-weight: 600;
        }
      }
    }
    .save_info {
      display: flex;
      position: absolute;
      right: 40px;
      top: 36px;
      p {
        margin-left: 20px;
        border-radius: 5px;
        cursor: pointer;
        &:nth-of-type(1) {
          color: #1799eb;
          padding: 9px 22px;
          background: #e5f4ff;
        }
        &:nth-of-type(2) {
          color: #1799eb;
          padding: 9px 22px;
          background: #e5f4ff;
        }
      }
    }
  }
  .see_detail {
    cursor: pointer;
    color: #1796eb;
  }
  .del_modal {
    .content {
      display: flex;
      flex-direction: column;
      align-items: center;
      p {
        &:nth-of-type(1) {
          width: 92px;
          height: 92px;
          border-radius: 50%;
          background: linear-gradient(to bottom, #f25851, #f27350);
          display: flex;
          justify-content: center;
          align-items: center;
          margin-bottom: 18px;
          i {
            font-size: 40px;
            color: white;
          }
        }
        &:nth-of-type(2) {
          font-size: 20px;
          color: #333;
        }
        &:nth-of-type(3) {
          font-size: 14px;
          color: #999;
          margin-top: 7px;
        }
      }
    }
  }
  .excelContent {
    & > div {
      padding: 0 50px;
      p {
        color: #999;
        font-size: 14px;
        &:nth-of-type(1) {
          margin-top: 30px;
          margin-bottom: 8px;
          font-weight: 600;
        }
        &:nth-of-type(2) {
          padding-left: 30px;
          margin-bottom: 18px;
        }
        &:nth-of-type(3) {
          padding-left: 30px;
          background: #f5f5f5;
          line-height: 20px;
          padding: 16px 0 16px 20px;
          border-radius: 10px;
          margin-bottom: 30px;
        }
        &:nth-of-type(4) {
          font-weight: 600;
        }
        &:nth-of-type(5) {
          color: #b2b2b2;
          padding-left: 30px;
          margin-bottom: 10px;
        }
      }
    }
  }
  .btn {
    margin-top: 30px;
    width: 100%;
    display: flex;
    justify-content: center;
    /deep/ .el-button {
      width: 214px;
    }
  }
  .activate_modal {
    .content {
      display: flex;
      flex-direction: column;
      align-items: center;
      .search_teacher {
        /deep/ .el-input {
          width: 440px;
        }
      }
      .radio {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        max-height: 120px;
        overflow-y: auto;
        div {
          width: 50%;
          height: 40px;
          display: flex;
          align-items: center;
        }
      }
      .check {
        .teacher_checkbox_group {
          display: flex;
          flex-wrap: wrap;
          width: 100%;
          max-height: 120px;
          overflow-y: auto;
          /deep/ .el-checkbox {
            margin-right: 0;
          }
          .teacher_checkbox {
            width: 50%;
            height: 40px;
            display: flex;
            align-items: center;
          }
        }
      }
      p {
        &:nth-of-type(1) {
          width: 92px;
          height: 92px;
          border-radius: 50%;
          background: linear-gradient(to bottom, #f25851, #f27350);
          display: flex;
          justify-content: center;
          align-items: center;
          margin-bottom: 18px;
          i {
            font-size: 40px;
            color: white;
          }
        }
        &:nth-of-type(2) {
          font-size: 20px;
          color: #333;
        }
        &:nth-of-type(3) {
          font-size: 14px;
          color: #999;
          margin-top: 7px;
        }
      }
    }
  }
}
</style>
